<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//表格显示json数组数据
		var json=[{"ID":1,"name":"admin","address":"北京市海淀区","phone":"1231552"},
			{"ID":2,"name":"梅西","address":"湖北省武汉区","phone":"123456"},
			{"ID":3,"name":"詹姆斯","address":"四川省成都市","phone":"4594515"},
			{"ID":4,"name":"tom","address":"广西省海淀区","phone":"8888888"}];
		
		var $table = $("<table border='1'></table>").append(
    		"<tr><td>ID</td><td>姓名</td><td>住址</td><td>电话</td></tr>");
		$(json).each(function() {
			$table.append("<tr><td>" + this.ID + "</td><td>"
             	+ this.name + "</td><td>"
             	+ this.address + "</td><td>"
             	+ this.phone + "</td></tr>");
		});
		$("#objectArrayDiv").append($table);	
		//下拉列表显示json对象数组数据
		var $json = $(json);
		var $sel = $("#arraySel"); // 展示数据的select元素
		$json.each(function(i) {
		   $sel.append("<option value='"+(i+1)+"'>"+this.name+"-"+this.address+"-"+this.phone+"</option>");
	    });

	});
</script>
</head>
<body>
	<div id="objectArrayDiv"></div><br>
	<select id="arraySel"></select>
</body>
</html>